<template>
  <div>
    <div class="login_box" :style="bg">
      <div class="mid--1150 pos_rel">
        <div class="login_body rf pos_abs">
          <div class="title flex">
            <div class="logo">
              <img />
            </div>
            <span class="name">注册账号</span>
          </div>
          <hr />
          <br />
          <form id="form-login" method="get" action="/register">
            <div class="main">
              <div class="text">
                <input
                  type="text"
                  class="innerBox"
                  v-model="phone"
                  placeholder="请输入您的号码"
                  name="phone"
                  required
                  autofocus
                />
                <div class="mt--15"></div>
              </div>&nbsp;
              <br />
              <div class="text">
                <input
                  type="text"
                  class="innerBox"
                  v-model="r_code"
                  placeholder="请输入验证码"
                  name="code"
                  required
                  style="width:60%"
                />
                <div class="reg_code rf" @click="my_code1()">
                  <canvas ref="can1" width="100px" height="40px" class="lf"></canvas>
                </div>
                <span></span>
              </div>&nbsp;
              <br />

              <div class="chose">
                <div class="lf chose-box">
                  <div>
                    <a style="font-size:12px" @click="to('login')">【已有账号！直接登录】</a>
                  </div>
                </div>
              </div>
              <input class="button_login" type="button" value="下一步" @click="bt_next" />
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
var code;
var _self;
import "@/assets/css/frx/common.css";
import "@/assets/css/frx/font-awesome-4.7.0/css/font-awesome.min.css";
import "@/assets/css/frx/login.css";
import my_can from "@/api/frx/js/my_can";
import pub from "../../api/frx/js/public";

export default {
  data() {
    return {
      phone: "",
      r_code: "",
      bg: {
        backgroundImage: "url(" + require("@/assets/imgs/cl/img1.jpg"),
        backgroundRepeat: "no-repeat",
        backgroundPosition: "center center ",
        backgroundSize: "100%"
      }
    };
  },
  created() {
    _self = this;
  },
  methods: {
    // 更新验证码
    my_code1() {
      code = my_can.mycanvas(_self.$refs.can1);
    },

    // 跳转
    to(index) {
      _self.$router.push(index);
      _self.reset_phone();
      _self.reset_upwd();
    },
    // 下一步
    async bt_next() {
      try {
        pub.ch_phone(_self.phone);
        pub.ch_code(code, _self.r_code);

        /**1.验证手机号是否可用，可用则传值到下一个信息注册页面
         *
         */
        var gg = await pub.http_get("user", "check/phone", {
          phone: _self.phone
        });

        if (gg.data == "yes") {
          alert("手机已存在！");
          return;
        }

        await this.$router.push({
          name: "userInfor",
          params: { phone: _self.phone }
        });
      } catch (e) {
        if (e.message == "phone") {
          alert("请输入正确的11位电话号码");
          return;
          // history.go(0);
        } else if (e.message == "code") {
          alert("验证码错误");
          return;
          // history.go(0);
        }
      }
    },

    // 清空
    reset_phone() {
      _self.phone = "";
    },
    reset_upwd() {
      _self.r_code = "";
    }
  },

  mounted() {
    code = my_can.mycanvas(_self.$refs.can1);
  }
};
</script>

<style scoped>
</style>